<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>
<style type="text/css">
	.input-group{
		height: 4rem;
		line-height: 4rem;
		margin: 0 1rem;
		border-bottom: 1px solid #ccc;
	}
	.getcode{
		position: absolute;
		right: 1rem;
		top:1rem;
		height: 2rem;
	}
	.register{
		margin: 2rem 30%;
		width: 40%;
		height: 3rem;
		font-size: 1.2rem;
		font-weight: 600;
		border-radius:1.5rem;
	}

</style>
	<body>
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header><br /><br /><br />
		<form class="mui-input-group">
			<div class="input-group">
				<input type="text" class="mui-input-clear" placeholder="请输入手机号" id="phone"/>
			</div>
			<button class="mui-btn-blue getcode" type="button"
			 id="getcode">获取验证码</button>
			<div class="input-group">
				<input type="password" class="mui-input-password" placeholder="请输入密码" id="password" />
			</div>
			<div class="input-group">
				<input type="password" class="mui-input-password" placeholder="请确认密码"  id="repassword"/>
			</div>
			<div class="input-group">
				<input type="text" class="mui-input-clear" placeholder="请输入验证码" id="code" />
			</div>
		</form>
		<button type="button" class="mui-btn-blue register" id="register">注册</button>
	</body>
	<script type="text/javascript">
		mui.ready(function () {
			var getcode = document.getElementById("getcode");
			var phone = document.getElementById("phone");
			var password = document.getElementById("password");
			var repassword = document.getElementById("repassword");
			var register = document.getElementById("register");
			//获取验证码
			getcode.addEventListener("tap",function(){
				
				if(!app.checkPhone(phone.value)){
					plus.nativeUI.toast("手机格式错误，请重新输入",{verticalAlign : "top",
					background:"red"});
					return;
				}
				mui.ajax("http://192.168.137.1:8080/user/getcode",{
					data:{phone:phone.value},
					type:"get",
					timeout:10000,
					
					success:function(data){
						mui.toast('发送成功，请注意接收和查看',{ duration:'long', type:'div' });
						changeCode(data.data);
						
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				})
				});	
			//注册
			register.addEventListener("tap",function(){
				if(!app.checkPhone(phone.value)){
					plus.nativeUI.toast("手机格式错误，请重新输入",{verticalAlign : "top",
					background:"red"});
					return;
				}if(password.value == null || password.value == ""){
					plus.nativeUI.toast("密码不能为空",{verticalAlign : "top",
					background:"red"});
					return;
				}
				if(code.value == null || code.value == ""){
					plus.nativeUI.toast("验证码不能为空",{verticalAlign : "top",
					background:"red"});
					return;
				}
				mui.ajax("http://192.168.137.1:8080/user/register",{
					data:{
						phone:phone.value,
						password:password.value,
						code:code.value
					},
					type:"post",
					timeout:10000,
					dataType:"json",
					success:function(data){
						console.log(JSON.stringify(data));
						if (data.status == 200) {
							mui.toast("注册成功",{duration:'long',type:'div'});
							window.location.href="login.html";
						} else{
							mui.toast("注册失败："+data.msg,{duration:'long',type:'div'});
							
						}
					}
				})
			});
		});
		function changeCode(code){
			var clock = 60;
			var btn_code = document.getElementById("getcode");
			codebtn();
		  function codebtn(){
			  if(clock == 0){
				btn_code.disabled = false;
				btn_code.innerHTML = "获取验证码";
				clock = 60;
				return;
			}
			else{
				if(clock == 52){
					mui.toast("您的验证码为："+code,{duration:'long',type:'div'});
				}
				btn_code.disabled = true;
				btn_code.innerHTML = clock+"s后可重新发送";
				clock --;
			}
		  
			  setTimeout(function(){
				  codebtn()
			  },1000);
			}
		}
	</script>
</html>
